<template>
	<el-drawer title="审核流程" :size="360" :visible.sync="visible">
		<div class="audit_flow_wrapper" v-loading="loading">
			<el-timeline v-if="flowInfoList.length > 0">
				<template v-for="(item, index) in flowInfoList">
					<el-timeline-item placement="top" :type="item.isCurrent | flowStatus" :timestamp="item.createTime">
						{{ item.name }}
					</el-timeline-item>
				</template>
			</el-timeline>
			<el-empty v-else :image-size="150"></el-empty>
		</div>
	</el-drawer>
</template>

<script>
import { getCurrFlowInfo } from '@/api/approval/flowApi';
export default {
	props: {
		value: { type: Boolean, default: false },
		businessKey: { type: String, default: '' }
	},
	data() {
		return {
			loading: false,
			visible: this.value,
			flowInfoList: []
		};
	},
	filters: {
		flowStatus(input) {
			if (input === '1') {
				return 'info';
			} else if (input === '2') {
				return 'success';
			}
		}
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		visible(flag) {
			this.$emit('input', flag);
			if (!flag) return false;
			this.loading = true;
			this.getCurrFlowInfo();
		}
	},
	methods: {
		async getCurrFlowInfo() {
			let params = { businessKey: this.businessKey };
			let result = await getCurrFlowInfo(params).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				this.flowInfoList = result.data || [];
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.audit_flow_wrapper {
	padding: 16px;
	min-height: 400px;
}
</style>
